<template> 
	<view style="padding: 20px;">
		<cl-upload
			v-model="malbum.photos"
			:action="action"
			:headers="headers"  
			:data="upformData"  
			@onDelete="onDelete"
			@onSuccess="onSuccess"
			:listStyle="{
				columns: 2,
				columnGap: '10rpx',
				rowGap:'10rpx',
				padding:'10rpx',
				radius:'10rpx'
			}" fileType='image'>
				<template #addImg>
					<image style="width: 280rpx" :src="BASE_IMG_URL+'add.png'"
						mode="widthFix"></image>
				</template>
			
				<template #playImg>
					<image style="width: 40rpx" src="https://s3.bmp.ovh/imgs/2022/07/30/eb9d0ae2037afcd3.png"
						mode="widthFix"></image>
				</template>
			 
			</cl-upload>
	</view>
</template>

<script>
	import {
		netCluesFiles,
	} from '@/api/clues.js'
	import {netKehuAlbumPhotoList, netDelAcc} from '@/api/kehu.js'
	import { BASE_URL, BASE_IMG_URL } from '@/util/api.js'
	 
	export default {
		components: {
		},
		data() {
			return { 
				BASE_IMG_URL:BASE_IMG_URL,
				chked: [],
				action: BASE_URL+'common/uploadAlbumfiles',
				memberId: '',
				headers: {
						'Authori-vipadmin': uni.getStorageSync('token'),
					},
				malbum: {
					id: '',
					photos: [], 
				},
				upformData: {
					uploadPath: 'MemberPhotos',
					memberId:null,
				}
			}
		},
		onLoad(options) {
			this.memberId = options.memberId 
			this.upformData.memberId = options.memberId 
		},
		onShow() {
			//附件 列表、
			this.getFile()
		},
		created() {
			
		},
		methods: {
			//附件 列表
			getFile() {
				let params = {
					memberId: this.memberId
				}
				console.log("------------")
				this.malbum.photos = []
				netKehuAlbumPhotoList(params).then(res=>{
					res.data.forEach(item=>{
						this.malbum.photos.push(item); 
					})
					this.file_list = res.data
				})
			},
			// 监听自动上传
			onDelete:function(res){
				console.log(res);
				let params = {
					id: res.id
				} 
				netDelAcc(params).then(res=>{
					//this.getFile()
				})
				// this.malbum.photos.push(res.data.retObj[0]); 
				// res 同上
			},
			// 监听自动上传
			onSuccess:function(res){
				console.log(res);
				this.malbum.photos.push(res.data.retObj[0]); 
				// res 同上
			},
			// 点击 附件  查看
			lookDetail(item) {
				if(item.types.indexOf('image') != -1){
					uni.previewImage({
						urls: [ item.file_path ]
					})
				}else{
					uni.downloadFile({
						url: item.file_path,
						success:(res)=>{
							uni.openDocument({
								filePath:res.tempFilePath,
								success:(res)=>console.log('成功打开文档')
							})
						},
						fail:(err)=>{
							console.log(err,'shibai')
						}
					})
				}
			},
			// 编辑
			edit(index) {
				let obj = this.file_list[index]
				obj.disabled = false
				obj.focus = true
				this.file_list[index] = obj
			},
			changeName(e) {
				let name = e.detail.value
				let index = e.currentTarget.dataset.index
				let params = {
					id: this.file_list[index].id,
					name: this.file_list[index].name,
				}
				netEditFileName(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.getFile()
					}, 2000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/*每个页面公共css */ 
	/* #ifndef APP-NVUE */
	// @import '@/static/cl-upload/customicons.css';
	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}
	/* #endif */
	.header {
		margin-bottom: 10rpx;
	}
	
	.header text {
		font-family: inherit;
		font-weight: 600;
		color: #757bf7;
	}
	
	.delete {
		position: absolute;
		width: 20px;
		height: 20px;
		background: #ff6f6f;
		right: -2px;
		top: -2px;
		z-index: 1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	
	/deep/.uni-group__content {
		padding: 20rpx;
		padding-bottom: 0;
	}
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>
